<template>
    <div class="list">
        <!-- 排序 -->
        <van-sticky>
            <div class="tab fca bfff c797d82 f14">
                <span>推荐</span>
                <span>销量<van-icon name="arrow-down" size="10px" /></span>
                <span>价格<van-icon name="arrow-down" size="10px" /></span>
            </div>
        </van-sticky>
        <!-- 商品 -->
        <div class="product pa15 fl fww">
            <router-link v-for="(item, index) in product" :key="item.productId" :to="'/detail/' + item.productId"
                class="product-item">
                <img class="product-img bf4f4f4" :src="item.imgUrl">
                <div class="mb-20 mt-10 fl fdc ovh lh15">
                    <p class="ovh c666 f14">{{ item.masterName }}</p>
                    <p class="ovh c666 f12">{{ item.slaveName }}</p>
                    <div class="fcb mr-10">
                        <p class="cc03131 ">
                            <span class="f10">￥</span><span class="f15">{{ item.minPrice | fMoney }}</span>
                        </p>
                        <p class="c999 mr-5">
                            <span class="f10">销量:</span>
                            <span class="f14">{{ item.inventory }}</span>
                        </p>
                    </div>
                </div>
            </router-link>
            <div class="product-item"></div>
        </div>

    </div>
</template>

<script>
export default {
    name: 'List',
    data() {
        return {
            // product: [],
        };
    },
    // 声明接收的 props
    props: {
        product: []
    },

};
</script>

<style scoped lang="less">
.list {

    .tab {
        height: 44px;
    }

    .product-item {
        width: 40%;
        flex-grow: 1;
    }

    .product-item:nth-child(2n) {
        margin-left: 10px;
    }
    .product-img {
        width: 100%;
    }
}
</style>